import carInfo from '@/components/acessory/carInfo'

export default {
  data() {
    return {
      scrollTop: 0, //tab标题的滚动条位置
      oldScrollTop: 0,
      current: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      itemId: '', // 栏目右边scroll-view用于滚动的id
      tabbar: [], //类别列表
      menuItemPos: [],
      arr: [],
      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
      timer: null, // 定时器
      fname: '', //类别name
      fnameid: '', //类别id
      bname: '',
      leixinglist: [],
      lookmore: '查看更多',
      displaybrand: false, //已选择车型是否显示判断
      Selectresult: [],
      Selectresultxisnhi: [],
      shifouhuad: false,
      fnamelist: [],
      type: '0',  //0 新增询件 1 编辑询件
      keyWords: '', //搜索关键字
      oldKeyWords: '', //上一次的搜索关键字
    }
  },
  computed: {
    carInfo(){
      return this.$store.state.accessory.carInfo
    }
  },
  components: {
    carInfo,
  },
  onLoad(e) {
    this.type = e.type
  },
  onShow(){
    if(this.$store.state.accessory.selectresult.length > 0){
      this.Selectresult = this.$store.state.accessory.selectresult
    }
    if(this.type === '1'){
      this.Selectresultxisnhi = this.Selectresult.slice(0, 3)
      this.fnamelist = [...this.Selectresult]
    }
  },
  mounted(){
    this.getList()
    this.getMenuItemTop()
  },
  destroy(){
    console.log('destroy')
  },
  methods: {
    //获取列表列表
    getList() {
      uni.showLoading({
        title: '加载中'
      })
      this.$api.accessory.getCarPartCategories({
        keyWords: this.keyWords
      }).then( res => {
        this.tabbar = []
        if(res.data.length){
          this.tabbar = [...res.data]
        }
        uni.hideLoading()
      }).catch(e => {
        console.log(e)
        uni.hideLoading()
      })
    },

    //搜索
    search() {
      if(this.oldKeyWords !== this.keyWords){
        this.getList()
        this.oldKeyWords = this.keyWords
      }
    },

    // 删除
    deleteclick(index) {
      this.Selectresult.splice(index, 1) //取消
      this.Selectresultxisnhi = this.Selectresult.slice(0, 3)
      this.fnamelist.splice(index, 1) //取消
    },

    //清空
    qingkoing() {
      this.Selectresult = [] //取消
      this.Selectresultxisnhi = []
      this.fnamelist = []
    },
    //不可重复选择
    fliters(arr, obj) {
      var flag = false
      if (arr.length == 0) {
        return false
      }
      arr.forEach(item => {
        if (JSON.stringify(item) == JSON.stringify(obj)) {
          flag = true
        }
      })
      return flag
    },

    //选择
    bussclick(data) {
      //方便之后的提交、修改询价订单，整理数据格式
      let fname = {
        part_Category_Id: data.id,
        part_Category_Name: data.name,
        images: [],
        explain_Text: '',
        purchase_Number: 1,
      }
      if (this.Selectresult.length < 50) {
        if (this.fliters(this.fnamelist, fname)) {
          this.fnamelist.forEach((item, index) => {
            if (item.id === fname.part_Category_Id) {
              this.Selectresult.splice(index, 1) //取消
              this.fnamelist.splice(index, 1) //取消
              this.Selectresultxisnhi = this.Selectresult.slice(0, 3)
            }
          })
          fname = {}
          return
        }
        // this.fnamelist = [fname].concat(this.fnamelist)
        this.fnamelist.push(fname)
        if (this.fliters(this.Selectresult, fname)) {
          this.Selectresult.forEach((item, index) => {
            if (item.id === fname.part_Category_Id) {
              this.Selectresult.splice(index, 1) //取消
              this.fnamelist.splice(index, 1) //取消
              this.Selectresultxisnhi = this.Selectresult.slice(0, 3)
            }
          })
          fname = {}
          return
        }
        // this.Selectresult = [fname].concat(this.Selectresult)
        this.Selectresult.push(fname)
        this.Selectresultxisnhi = this.Selectresult.slice(0, 3)
      } else {
        setTimeout(function() {
          uni.showToast({
            title: '最多选择50组',
            duration: 2000,
            icon: 'none'
          })
        }, 100)
      }
    },
    //===查看更多
    lookmorclick() {
      this.displaybrand = !this.displaybrand
      if (this.displaybrand == false) {
        this.lookmore = '查看更多'
      } else {
        this.lookmore = '点击隐藏'
      }
    },

    //确认
    confirm() {
      if(!this.Selectresult.length){
        uni.showToast({
          title: '请选择需询价的配件',
          icon: 'none'
        })
        return
      }
      this.$store.commit('accessory/setSelectresult',this.Selectresult)
      if(this.type === '0'){ //新增
        uni.navigateTo({
          url: '/pages_findAccessory/newInquiry/newInquiry?type=' + this.type
        })
      } else { //编辑
        uni.navigateBack()
      }

    },
    // 点击左边的栏目切换
    async swichMenu(item, index) {
      this.bname = item.name
      if (this.arr.length == 0) {
        await this.getMenuItemTop()
      }
      if (index == this.current) return
      this.scrollRightTop = this.oldScrollTop
      this.$nextTick(function() {
        this.scrollRightTop = this.arr[index]
        this.current = index
        this.leftMenuStatus(index)
      })
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this)
        query.select('.' + elClass).fields({
          size: true
        }, res => {
          // 如果节点尚未生成，res值为null，循环调用执行
          if (!res) {
            setTimeout(() => {
              this.getElRect(elClass)
            }, 10)
            return
          }
          this[dataVal] = res.height
          resolve()
        }).exec()
      })
    },
    // 观测元素相交状态
    async observer() {
      this.tabbar.map((val, index) => {
        let observer = uni.createIntersectionObserver(this)
        // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
        // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
        observer.relativeTo('.right-box', {
          top: 0
        }).observe('#item' + index, res => {
          if (res.intersectionRatio > 0) {
            let id = res.id.substring(4)
            this.leftMenuStatus(id)
          }
        })
      })
    },
    // 设置左边菜单的滚动状态
    async leftMenuStatus(index) {
      this.bname = this.tabbar[index].name
      this.current = index
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('menu-scroll-view', 'menuHeight')
        await this.getElRect('u-tab-item', 'menuItemHeight')
      }
      // 将菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
    },
    // 获取右边菜单每个item到顶部的距离
    getMenuItemTop() {
      new Promise(resolve => {
        let selectorQuery = uni.createSelectorQuery()
        selectorQuery.selectAll('.class-item').boundingClientRect(rects => {
          // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
          if (!rects.length) {
            setTimeout(() => {
              this.getMenuItemTop()
            }, 10)
            return
          }
          rects.forEach(rect => {
            // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
            this.arr.push(rect.top - rects[0].top)
            if (this.arr[0] == 0) {
              this.shifouhuad = true
            }
            resolve()
          })
        }).exec()
      })
    },
    // 右边菜单滚动
    async rightScroll(e) {
      this.oldScrollTop = e.detail.scrollTop
      if (this.oldScrollTop > 10) {
        this.shifouhuad = false
      } else {
        this.shifouhuad = true
      }
      if (this.arr.length == 0) {
        await this.getMenuItemTop()
      }
      if (this.timer) return
      if (!this.menuHeight) {
        await this.getElRect('menu-scroll-view', 'menuHeight')
      }
      setTimeout(() => { // 节流
        this.timer = null
        // scrollHeight为右边菜单垂直中点位置
        let scrollHeight = e.detail.scrollTop + this.menuHeight / 2
        for (let i = 0; i < this.arr.length; i++) {
          let height1 = this.arr[i]
          let height2 = this.arr[i + 1]
          // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
          if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
            this.leftMenuStatus(i)
            return
          }
        }
      }, 10)
    },

  }
}
